<!DOCTYPE HTML>
<head>
	<meta charset='utf-8'>
	<title>轮播图</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		body{
			
			background-color: aqua;
		}
		img{
			width:500px;
			height:300px;
		}
		#outer{
			width:520px;
			height:300px;
			margin:50px auto;
			background-color:cyan;
			padding:10px 0;
			overflow:hidden;
			position:relative;
			<!-- 相对定位 -->
		}
		
		#imgList{
			list-style:none;
			left:0;
			position:absolute;
			<!-- 绝对定位 -->
		}
		
		#imgList li{
			float:left;
			margin:0 10px;
		}
		
		#navDiv{
			bottom:15px;
			
			position:absolute;
			<!-- 绝对定位 -->
			
		}
		#navDiv a{
			width:15px;
			height:15px;
			float:left;
			background-color:red;
			margin:0 5px;
			
			opacity:0.5;
			
			filter:alpha(opacity=50);
			<!-- 兼容IE8 -->
		}
		#navDiv a:hover{
			background-color:black;
			<!-- 当鼠标触碰式为黑色 -->
		}
	</style>
	
	<script src='js/tools.js'>/*引用工具*/</script>
	
	<script>
		window.onload = function(){
			
			//获取imgList
			var imgList = document.getElementById('imgList');
			
			//获取页面中所有图片
			var imgARR = document.getElementsByTagName('img');
			
			//设置imgList的宽度
			imgList.style.width = 520*imgARR.length+'px';
			
			//设置导航按钮居中
			var navDiv = document.getElementById('navDiv');
			
			//获取outer
			var outer = document.getElementById('outer');
			
			//设置navDiv的left值
			navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 +'px';
			
			//默认显示图片的索引
			var index = 0;
			
			
			//获取所有的a
			var as = document.getElementsByTagName('a');
			
			//设置默认选中效果
			as[index].style.backgroundColor = 'black';
			
			/*
				点击超链接显示指定图片
			*/
			//为所有的超链接绑定单击响应函数
			for(var i=0;i<as.length;i++){
				//为每一个超链接添加一个num属性
				as[i].num = i;
			
				as[i].onclick = function(){
					
					//关闭自动切换的定时器
					clearInterval(timer);
				
					//获取点击超链接的索引,并将其设置为index
					index = this.num;
					
					//切换图片
					/*
						第一张0 0
						第二张1 -520
						第三张2 -1040
					*/
					//imgList.style.left =  -520*index + 'px';
					
					//调用外部的setA来控制颜色
					setA();
					
					//使用选中函数切换图片
					//100是设置速度
					move(imgList,'left',-520*index,100,function(){
						//动画执行完毕开启自动切换
						atuoChange();
					});
				}
			}
			
				//自动切换图片
				atuoChange();
				
				//创建一个方法来设置选中的a
				function setA(){
					//判断当前索引是否是最后一张图片
					if(index >= imgARR.length - 1){
						index = 0;
						//此时显示的最后一张图片,而最后一张和第一张一样
						//通过CSS将最后一张切换成第一张
						imgList.style.left = 0;
					}
					
					//遍历所有的a将背景设置为空串,
					for(var i=0;i<as.length;i++){
						as[i].style.backgroundColor = '';
					}
					//将选中的a设置为black
					as[index].style.backgroundColor = 'black';
				};
				
				//定义一个定时器的标识
				var timer;
				//创建一个函数,开启自动切换图片
				function atuoChange(){
					//开启一个定时器,用于定时切换图片
					timer = setInterval(function(){
					
						//使索引自增
						index++;
						
						//限制index
						if(index >= imgARR.length){
							index = 0;
						}
						
						//执行函数切换
						move(imgList,'left',-520*index,100,function(){
							//修改导航按钮
							setA();
						});
					},3000);
				}
		}
	
	</script>
</head>
<body>
	<!-- 创建一个外部的div,作为容器 -->
	<div id='outer'>
		<!-- 创建一个ul,存放图片 -->
			<ul id='imgList'>
			  <li>	
				<img src='img/1.png'>
			  </li>	
			  <li>	
				<img src='img/5.png'>
			  </li>
			  <li>	
				<img src='img/3.png'>
			  </li>
			  <li>	
				<img src='img/2.png'>
			  </li>
			  <li>	
				<img src='img/4.png'>
			  </li>
			  <li>	
				<img src='img/1.png'>
			  </li>	
			 </ul> 
			 <!-- 创建导航按钮 -->
			 <div id='navDiv'>
					<a href='javascript:;'></a>
					<a href='javascript:;'></a>
					<a href='javascript:;'></a>
					<a href='javascript:;'></a>
					<a href='javascript:;'></a>
			 </div> 		
	</div>		 
</body>
</html>